import { StyleSheet, Text, View, TextInput, ScrollView, Button, Image, Alert, TouchableOpacity } from 'react-native'
import React, { useState } from 'react'
import * as ImagePicker from 'expo-image-picker';
import axios from 'axios';
import RNPickerSelect from 'react-native-picker-select';
const feedback = () => {
    const [opiniondesc, setOpiniondesc] = useState('');
    const [opinionphone, setOpinionphone] = useState('')
    const [image, setImage] = useState(null);
    const [selectedValue, setSelectedValue] = useState('');
    const pickImage = async () => {
        let result: any = await ImagePicker.launchImageLibraryAsync({
            mediaTypes: ImagePicker.MediaTypeOptions.Images,
            allowsEditing: true,
            aspect: [4, 3],
            quality: 1,
        });

        if (!result.cancelled) {
            setImage(result.uri);
        }
    };

    const uploadImage = async () => {
        if (!image) {
            Alert.alert('No image selected');
            return;
        }

        const formData = new FormData();
        formData.append('image', {
            uri: image,
            name: 'image.jpg',
            type: 'image/jpeg',
        });

        try {
            const response = await axios.post('https://your-server-url.com/upload', formData, {
                headers: {
                    'Content-Type': 'multipart/form-data',
                },
            });

            console.log('Upload success:', response.data);
            Alert.alert('Success', 'Image uploaded successfully');
        } catch (error) {
            console.error('Upload error:', error);
            Alert.alert('Error', 'Failed to upload image');
        }
    };

    return (
        <View style={styles.feedback}>
            <ScrollView>
                <RNPickerSelect
                    onValueChange={(value) => setSelectedValue(value)}
                    items={[
                        { label: '产品体验', value: '产品体验' },
                        { label: '产品功能', value: '产品功能' },
                        { label: '客户服务', value: '客户服务' },
                        { label: '其他问题', value: '其他问题' },
                    ]}
                    style={pickerSelectStyles}
                    value={selectedValue}
                    placeholder={{ label: '请选择', value: null }}
                />
                <TextInput
                    style={styles.input}
                    multiline={true}
                    placeholder="请输入反馈信息"
                    value={opiniondesc}
                    onChangeText={setOpiniondesc}
                    maxLength={1000}
                />
                <TextInput style={styles.inputPhone} placeholder='手机/邮箱/QQ(选填)'
                    value={opinionphone}
                    onChangeText={setOpinionphone} />
                <Button title="Pick an image from camera roll" onPress={pickImage} />
                {image && <Image source={{ uri: image }} style={styles.image} />}
                <Button title="Upload Image" onPress={uploadImage} />
                <TouchableOpacity style={styles.button}>
                    <Text style={styles.buttonText}>提交</Text>
                </TouchableOpacity>
            </ScrollView>


        </View>
    )
}

export default feedback

const styles = StyleSheet.create({
    feedback: {
        width: '100%',
        height: '100%',
        backgroundColor: 'white',
        padding: 10,
        boxSizing: 'border-box',
    },
    input: {
        borderWidth: 1,
        borderColor: '#ccc',
        borderRadius: 5,
        padding: 10,
        fontSize: 16,
        height: 100,
    },
    inputPhone: {
        borderWidth: 1,
        borderColor: '#ccc',
        borderRadius: 5,
        padding: 10,
        fontSize: 16,
        height: 50,
        marginTop: 10,
    },
    image: {
        width: 200,
        height: 200,
        marginTop: 20,
    },
    button: {
        backgroundColor: 'blue',
        paddingVertical: 10,
        paddingHorizontal: 20,
        borderRadius: 45,
        alignItems: 'center',
        marginTop: 20,
    },
    buttonText: {
        color: 'white',
        fontSize: 16,
        fontWeight: 'bold',
    },
})

const pickerSelectStyles = StyleSheet.create({
    inputIOS: {
        fontSize: 16,
        paddingVertical: 12,
        paddingHorizontal: 10,
        borderWidth: 1,
        borderColor: 'gray',
        borderRadius: 4,
        color: 'black',
        paddingRight: 30, // to ensure the text is never behind the icon
    },
    inputAndroid: {
        fontSize: 16,
        paddingHorizontal: 10,
        paddingVertical: 8,
        borderWidth: 0.5,
        borderColor: 'purple',
        borderRadius: 8,
        color: 'black',
        paddingRight: 30, // to ensure the text is never behind the icon
    },
});